<template>
  <div class="list-head clearfix">
    <div class="clearfix">
      <div class="song-list-cover fl posi-rel">
        <img :src=albumData.picUrl alt="" class='cover-img posi-ab'>
        <a href="javascript:;" class='disinblock mask posi-ab'></a>
      </div>
      <div class="song-list-detail fl ml50">
          <!-- 歌单标题 -->
          <div class="head mb20">
            <i class='song-tit disinblock'></i>
            <h2 class='fw500 fs20 disinblock ml10 song-name'>{{ albumData.name }}</h2>
          </div>
          <!-- 歌单作者 -->
          <div class="author fs12 fcgray">
            <p class='line-height-30'>
              歌手:  <a href="" class="auth-avatar">{{ albumData.artist.name }}</a>
            </p>
            <p class='line-height-30'>
              发行时间： {{ albumData.publishTime }}
            </p>
            <p class='line-height-30'>
              发行公司： {{ albumData.company }}
            </p>
          </div>
          <!-- 操作 -->
          <ul class='operation mt20 clearfix'>
            <li class='H100pc'>
              <!-- 播放 -->
              <a href="javascript:;" class='a-play disinblock posi-rel'>
                <i class='i-play posi-ab'></i>
                <span class='fs12 pl30 span-ply-font posi-ab'>播放</span>
              </a>
              <a href="javascript:;" class='a-collect disinblock' title='添加至播放列表'></a>
            </li>
            <li class='H100pc'>
              <!-- 收藏 -->
              <a href="javascript:;" class='collect-box fl fs10 r-btn'>
                <span class='collect-num fl pl30 background-btn'>收藏</span>
              </a>
            </li>
            <li class='H100pc'>
              <!-- 分享 -->
              <a href="javascript:;" class='share-box fl fs10 r-btn'>
                <span class='share-num fl pl30 background-btn'>({{ albumInfo.shareCount }})</span>
              </a>
            </li>
            <li class='H100pc'>
              <!-- 下载 -->
              <a href="javascript:;" class='download-box fl fs10 r-btn'>
                <span class='download-num fl pl30 background-btn'>下载</span>
              </a>
            </li>
            <li class='H100pc'>
              <!-- 留言 -->
              <a href="javascript:;" class='msg-box fl fs10 r-btn'>
                <span class='msg-num fl pl30 background-btn'>({{ albumInfo.commentCount }})</span>
              </a>
            </li>
          </ul>
      </div>
    </div>
    <!-- 介绍 -->
    <div class="album-desc-dot mt10 fs14 fcgray">
      <p class=" tags-tit mr10 fw800">专辑介绍:</p>
      <unfold class='mt20' :albumText=filterDesc(productData.descr) ></unfold>
    </div>
  </div>
</template>

<script>
import unfold from'../../utils/unfold'
export default {
  name: 'albumDetail',
  props: ['albumContent', 'product'],
  components: {
    unfold
  },
  data() {
    return {
      albumData: {
        artist: {}
      }, // 作者、封面、公司、发行时间
      albumContentData: {}, // 专辑全部数据
      productData: {},
      albumInfo: {} // 收藏、分享、评论
    }
  },
  watch: {
    albumContent() {
      this.albumContentData = this.albumContent
      this.albumData = this.albumContentData.album
      this.albumInfo = this.albumContentData.album.info
    },
    product() {
      this.productData = this.product
    }
  },
  methods: {
    filterDesc(desc) {
      let arr = []
      desc && desc.map(item => {
        arr.push(item.resource)
      })
      return arr
    },
  },
}
</script>

<style lang='less' scoped>
.song-list-cover {
    width: 208px;
    height: 208px;
    .cover-img {
        width: 171px;
        height: 173px;
    }
    .mask {
        top: -4px;
        left: -5px;
        width: 207px;
        height: 177px;
        background: url('../../assets/coverall.png') no-repeat;
        background-position: 0 -986px;
    }
}
.song-list-detail {
    width: 420px;
    .song-tit {
        width: 54px;
        height: 24px;
        background: url('../../assets/icon.png');
        background-position: 0 -186px;
        vertical-align: top;
    }
    .song-name {
        width: 350px;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
}
.list-head {
  height: auto;
}
.avatar {
  width: 32px;
  height: 32px;
}
.auth-name {
  color: #0c73c2;
}
.create-time {
  color: #999;
}
.operation {
  li {
    margin-right: 6px;
    float: left;
    margin-bottom: 20px;
    height: 30px;
    a {
      span {
        line-height: 30px;
      }
    }
  }
  .a-play {
    width: 66px;
    height: 100%;
    background: url('../../assets/button2.png');
    background-position: 242px -633px;
    &:hover {
      background-position: 242px -719px;
    }
    .i-play {
      width: 100%;
      height: 100%;
      line-height: 24px;
    }
    .span-ply-font {
      color: #fff;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .a-collect {
    width: 31px;
    height: 100%;
    background: url('../../assets/button2.png');
    background-position: 0 -1588px;
  }
  
  .r-btn, .background-btn {
    height: 100%;
    line-height: 28px;
    background: url('../../assets/button2.png');
  }
  .r-btn {
    padding-right: 4px;
    background-position: right -1020px;
  }
  .collect-num {
    background-position: 250px 3013px;
    &:hover {
      background-position: 250px 2927px;
    }
  }
  .share-num {
    background-position: 250px 2765px;
    &:hover {
      background-position: 250px 2722px;
    }
  }
  .download-num {
    background-position: 250px 5219px;
    &:hover {
      background-position: 250px 5175px;
    }
  }
  .msg-num {
    background-position: 250px 6515px;
    &:hover {
      background-position: 250px 6472px;
    }
  }

}
.tags-tit {
  line-height: 20px;
}
.tags-list {
  li {
    a {
      padding: 1px 10px;
      border-radius: 39%;
      border: 1px solid #d1d0d0;
      text-decoration: none;
      background-color: #f4f4f4;
      &:hover {
        background-color: #fff;
      }
    }
  }
}
.line-height-30 {
  line-height: 30px;
}
.auth-avatar {
  color: #0e6aa6;
}
</style>